<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div id="line" style="width: 30rem; height: 15rem"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts5",

  data() {
    return {
      option: {
        title: {
          text: "世界每周新增治愈和死亡人数",
          left: "center",
          //   字体样式
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
            fontStyle: 100,
          },
        },
        xAxis: {
          // 类目轴
          type: "category",
          data: ["06.09", "06.23", "07.07", "07.21", "08.04", "08.18", "09.0"],
          //   刻度
          axisTick: {
            // 刻度与标签文字对齐
            alignWithLabel: true,
          },
          // 轴与线条之间不留间隙
          boundaryGap: false,
        },
        yAxis: {
          // 数值轴
          type: "value",
          // 分割
          splitLine: {
            lineStyle: {
              color: "#193a6f",
            },
          },
          // 坐标轴线的样式
          axisLine: {
            show: true,
            lineStyle: {
              color: "#123c71",
            },
          },
          // 坐标轴标签
          axisLabel: {
            color: "#8d97b7",
          },
        },
        // 网格
        grid: {
          left: 85,
        },
        legend: {
          top: 20,
          textStyle: {
            color: "#747da0",
          },
        },
        // 系列
        series: [
          {
            // 折线图
            type: "line",
            data: [
              31000000, 37000000, 37200000, 37300000, 37400000, 38000000,
              40000000,
            ],
            // 线条和图例的颜色
            itemStyle: {
              color: "#00d386",
            },
            // 是否曲滑
            smooth: true,
            // 去掉节点
            symbol: "none",
            // 区域填充面积图
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#01766e", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "  transparent", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            name: "治愈人数",
          },
          {
            // 折线图
            type: "line",
            data: [500000, 500000, 500000, 500000, 500000, 500000, 500000],
            itemStyle: {
              color: "#018cde",
            },
            smooth: true,
            symbol: "none",
            name: "死亡人数",
          },
        ],
      },
    };
  },

  mounted() {
    let line = document.querySelector("#line");
    let obj = echarts.init(line);
    obj.setOption(this.option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: .0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  margin-top: .625rem;
  .box0 {
    width: .625rem;
    height: .625rem;
  }
  .box1 {
    border-top: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
  }
  .box2 {
    border-top: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>